.row {
  display: block;
  zoom: 1;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;

  &.flex {
    &:after {
      display: none;
    }

    & > .col-flex {
      width: 0;
      -webkit-box-flex: 1;
    }
  }

  &:after {
    display: table;
    visibility: hidden;
    clear: both;
    height: 0;
    content: " ";
  }

  & > .col-1 {
    width: 10%;
  }

  & > .col-2 {
    width: 20%;
  }

  & > .col-offset-2 {
    margin-left: 20%;
  }

  & > .col-4 {
    width: 40%;
  }

  & > .col-5 {
    width: 50%;
  }

  & > .col-10 {
    width: 100%;
  }
}

.row.flex > .col-flex,
.row.flex > .col,
.row.flex > .col-1,
.row.flex > .col-2,
.row.flex > .col-3,
.row.flex > .col-4,
.row.flex > .col-5,
.row.flex > .col-6,
.row.flex > .col-7,
.row.flex > .col-8,
.row.flex > .col-9,
.row.flex > .col-10 {
  float: none;
}

.row > .col,
.row > .col-1,
.row > .col-2,
.row > .col-3,
.row > .col-4,
.row > .col-5,
.row > .col-6,
.row > .col-7,
.row > .col-8,
.row > .col-9,
.row > .col-10 {
  display: block;
  float: left;
  padding-right: 0;
  padding-left: 0;
  -webkit-box-flex: 0;
}